<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚轮事件示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: height 0.2s; /* 添加动画过渡效果 */
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
<script>
    window.onload = function () {
        var box = document.getElementById("box");

        // 初始高度
        var currentHeight = 100;

        // 滚轮事件监听
        box.onwheel = function (event) {
            event = event || window.event;

            // 获取滚轮滚动方向（deltaY），deltaY：表示滚轮滚动方向，向上 滚时返回正数，向下滚时返回负数
            //Math.sign()：返回一个数字的符号，当数为正数时返回 1，为负数时返回 -1，为 0 时返回 0。
            var delta = Math.sign(event.deltaY);

            if (delta === -1) {
                // 向上滚动，盒子变短
                currentHeight -= 10;
            } else if (delta === 1) {
                // 向下滚动，盒子变长
                currentHeight += 10;
            }

            // 设置最小高度为 20 像素
            if (currentHeight < 20) currentHeight = 20;

            // 更新盒子高度
            box.style.height = currentHeight + "px";
        };
    };
</script>
</html>
